<template>
  <div>
    <p>gui.js库(分组)</p>
    <div class="three_box"></div>
  </div>
</template>

<script setup>
import { nextTick } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { GUI } from "three/addons/libs/lil-gui.module.min.js";
nextTick(() => {
  const scene = new THREE.Scene();
  const canvasDom = document.querySelector(".three_box");
  const canvasWidth = canvasDom.offsetWidth;
  const canvasHeight = canvasDom.offsetHeight;
  const camera = new THREE.PerspectiveCamera(
    40,
    canvasWidth / canvasHeight,
    0.1,
    3000
  );
  const renderer = new THREE.WebGLRenderer({
    antialias: true, //去除锯齿化
  });
  let xyz = new THREE.AxesHelper(100);
  scene.add(xyz);
  renderer.setPixelRatio(window.devicePixelRatio); //优化的代码

  //   形状
  const capsuleGeo = new THREE.CapsuleGeometry(10, 25, 10, 10);
  const material = new THREE.MeshPhongMaterial({
    color: 0x00ffa0,
    transparent: false,
    opacity: 1,
    shininess: 15,
    specular: 0xff0000,
  });
  const capsuleMesh = new THREE.Mesh(capsuleGeo, material);
  capsuleMesh.position.set(0, 0, 0);
  scene.add(capsuleMesh);
  // line
  const capsuleEdges = new THREE.EdgesGeometry(capsuleGeo);
  const capsuleLine = new THREE.LineSegments(
    capsuleEdges,
    new THREE.LineBasicMaterial({ color: 0x444444 })
  );
  capsuleLine.position.set(0, 0, 0);
  scene.add(capsuleLine);
  //   光源
  const amLight = new THREE.AmbientLight(0xffffff, 1);
  scene.add(amLight);
  // const pointlight = new THREE.PointLight(0xffffff, 1);
  // pointlight.position.set(-50, -50, 50);
  // scene.add(pointlight);
  // //   可视化点光源
  // const lightHelper = new THREE.PointLightHelper(pointlight, 12);
  // scene.add(lightHelper);
  const dirLight = new THREE.DirectionalLight(0xffffff, 1.0);
  // 平行光的出发点
  dirLight.position.set(100, 70, 50);
  dirLight.target = capsuleMesh; //平行光目标，默认是原点
  scene.add(dirLight);
  // 平行光  可视化
  const dirLightHelper = new THREE.DirectionalLightHelper(
    dirLight,
    10,
    0xff0000
  );
  scene.add(dirLightHelper);
  // 相机定位
  camera.position.set(200, 200, 200);
  camera.lookAt(0, 0, 0);
  // 渲染器配置
  renderer.setSize(canvasWidth, canvasHeight);
  renderer.render(scene, camera);
  canvasDom.appendChild(renderer.domElement);
  let controls = new OrbitControls(camera, renderer.domElement);
  controls.addEventListener("change", function () {
    renderer.render(scene, camera);
  });

  // ******************* gui   ******************
  const gui = new GUI();
  // 将 gui加入到对应的DOM 结构中
  gui.domElement.style.position = "absolute";
  canvasDom.appendChild(gui.domElement);
  // 创建一个对象属性
  const obj = {
    x: 0,
    color: 0xff0000,
    scale: 0,
    bool: true,
  };
  // ---------------------------------------------------------------------------------
  function rorate() {
    if (obj.bool) {
      capsuleGeo.rotateX(0.005);
      capsuleLine.rotateX(0.005);
    }
    renderer.render(scene, camera);
    requestAnimationFrame(rorate);
  }
  rorate();
  // 创建一个交互界面
  gui
    .add(obj, "x", 0, 100)
    .name("自定义")
    .onChange(function (value) {
      capsuleMesh.position.x = value;
    });
  gui.add(amLight, "intensity", 0, 10).name("环境光强度").step(0.1);
  // .name()----- 修改标题
  // .step()----步长
  // .onChange(value)----属性改变事件
  gui.add(dirLight, "intensity", 0, 10).name("平行光源强度");
  gui.add(capsuleMesh.position, "x", 0, 100).onChange((value) => {
    console.log(value, "值变了");
  });
  gui.add(capsuleMesh.position, "y", 0, 100);
  gui.add(capsuleMesh.position, "z", 0, 100);
  // 改变颜色
  gui.addColor(obj, "color").onChange(function (value) {
    console.log(value, "颜色界面");
    capsuleMesh.material.color.set(value);
  });
  // gui.add 的参数3是一个数组-----------------------------------------------
  gui.add(obj, "scale", [-100, 0, 100]).onChange(function (value) {
    capsuleMesh.position.y = value;
  });
  //add 的参数3是一个对象--------------------------------------------------
  gui
    .add(obj, "scale", {
      左: -100,
      中: 0,
      右: 100,
    })
    .name("左右位置")
    .onChange(function (value) {
      capsuleMesh.position.x = value;
    });
  // add参数是一个布尔值-----------------------------------------
  gui.add(obj, "bool"); //控制旋转动画

  // -------------gui 分组------------
  let xyzGui = gui.addFolder("坐标");
  xyzGui.add(capsuleMesh.position, "x", 0, 100).onChange((value) => {
    console.log(value, "值变了");
  });
  xyzGui.add(capsuleMesh.position, "y", 0, 100);
  xyzGui.add(capsuleMesh.position, "z", 0, 100);
  // 设置默认打开或者关闭
  xyzGui.close()
});
</script>


<style  scoped>
.three_box {
  position: relative;
  width: 80vw;
  height: 70vh;
}
</style>